<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #parent {
      overflow: hidden;
    }

    /*#parent:after {*/
    /*content: '';*/
    /*display: block;*/
    /*clear: both;*/
    /*}*/

    a {
      display: block;
      width: 20px;
      text-align: center;
      float: left;
    }
  </style>
</head>
<body>
<div id="parent">
  <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a
        href="#">6</a><a href="#">6</a><a href="#">7</a><a href="#">8</a>
</div>

<script>
  var parent = document.getElementById('parent');
  var a = parent.getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {

    /**
     * 主要就是考察闭包 ；这里如果不用let 怎么解决
     *
     */
    // a[i].onclick = function () {
    //   console.log(i);//为什么是10
    // };

    //方法二
    let index = i;
    a[i].onclick = function () {
      console.log(index);
    }


    // 方法2
    // (function (i) {
    //   a[i].onclick=function () {
    //     alert(i);
    //   }
    // })(i)

  }
</script>
</body>
</html>